<template>
  <div class='w-full h-full flex'>
    <n-card class='w-1/4 h-full'>
      <n-button @click="addComment('slot')">插槽</n-button>
      <n-button @click="addComment('input')"> input</n-button>
      <n-button @click="addComment('select')"> select</n-button>
      <n-button @click="addComment('radio')"> radio</n-button>
      <n-button @click="addComment('checkbox')"> checkbox</n-button>
      <n-button @click="addComment('slider')"> slider</n-button>
      <n-button @click="addComment('picker')"> picker</n-button>
      <n-button @click="addComment('button')"> button</n-button>
      <n-button @click="addComment('color')"> color picker</n-button>
      <n-button @click="addComment('switch')">switch</n-button>
      <n-button @click="addComment('cascader')">cascader</n-button>
      <n-button @click="addComment('upload')">upload</n-button>
    </n-card>
    <n-card class='w-3/4 h-full'>
      <div v-for='item in zujianlist' class='p-2' @click='xuanze(item.uniquekey)' :key='item.uniquekey'>
        <div class='h-20  m-2' :style='{ width: `${item.span / 24 * 100}%` }'
          :class="[selectuniquekey === item.uniquekey ? 'border border-yellow-500  border-dotted' : '']">
          组件啊
        </div>
      </div>
      <div>不好做，不做了
      </div>
    </n-card>
    <Edit ref="editref"></Edit>  
  </div>
</template>

<script setup name='Createcode' lang='ts'>

import { useRoute } from 'vue-router'
import {  inject, DefineComponent } from 'vue'
import { ref } from 'vue'
import Edit from "./model.vue"
const route = useRoute()
const editref = ref<DefineComponent | null>(null)

// 当前选中的key
const selectuniquekey=ref<string>("")
// 当前选中的组件
// 点击选中某个组件
const xuanze=(key:string)=>{
  selectuniquekey.value = key
}
// 成型的组件列表
const zujianlist = ref<Array<any>>([])

// 添加新组件
const addComment = (key: string) => {
  editref.value.init(key)
}


const zhucefunc: Function | undefined = inject('zhuceshuaxinfunc')


// 初始化函数
const init = () => {

}


// 初始化区域
init()
zhucefunc && zhucefunc({ [route.name!.toString()]: init })
</script>

<style scoped>
</style>